<template>  
  <div>  
    <h1>用户编辑页面</h1>  
    <form>  
      <!-- 用户编辑表单内容 -->  
      <input v-model="userName" type="text" placeholder="用户名" />  
      <!-- 其他表单字段... -->  
      <button @click="saveChanges">保存更改</button>  
    </form>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      userName: '',  
      isFormChanged: false  
    };  
  },  
  watch: {  
    // 监听 userName 的变化来设置 isFormChanged  
    userName(newVal, oldVal) {  
      if (newVal !== oldVal) {  
        this.isFormChanged = true;  
      }  
    },  
    // 你可以为表单中的其他字段添加类似的监听器  
  },  
  methods: {  
    saveChanges() {  
      // 假设这是保存更改的方法  
      // ...保存逻辑...  
      this.isFormChanged = false; // 保存后重置更改状态  
    },  
    confirmLeave() {  
      // 弹出确认框询问用户是否真的要离开  
      if (this.isFormChanged) {  
        return window.confirm('您尚未保存更改，确定要离开吗？');  
      }  
      return true;  
    }  
  },  
  beforeRouteLeave(to, from, next) {  
    const answer = this.confirmLeave();  
    if (answer) {  
      next(); // 确认离开，允许导航继续  
    } else {  
      next(false); // 取消离开，阻止导航  
    }  
  }  
};  
</script>